import React, { useState } from 'react'

// 目标：点击按钮开启倒计时
// 问题：多次点击会开启多个定时器来控制 count，出问题了
// !解决：开启定时器之前，把上一个定时器给清除了，保证永远只有一个定时器来控制 count 的变化
export default function App() {
  const [count, setCount] = useState(10)
  let timer = null
  const handleClick = () => {
    // 每次点击把上一次的 timer 清除
    clearInterval(timer)
    timer = setInterval(() => {
      // count 一旦变化，整个组件都会重新渲染，说白了整个 App 函数组件里面的代码都会重头到尾走一次
      // 每次渲染都重新声明了一个 timer 变量是 null
      // 每次点击的时候，其实清除的是 null
      setCount((count) => count - 1)
    }, 1000)
  }
  return (
    <div>
      <h3>{count}</h3>
      <button onClick={handleClick}>开启倒计时</button>
    </div>
  )
}
